import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';
import reportWebVitals from './reportWebVitals';

// 样式模块化
// import ScopedStyle1 from './components/ScopedStyle1'
// import ScopedStyle2 from './components/ScopedStyle2'

// JSX基础
// import JSXBaseDemo from './components/JSXBaseDemo'

// 函数式组件
// import FunctionalComponentDemo from './components/FunctionalComponentDemo'

// 类式组件
// import ClassComponentDemo from './components/ClassComponentDemo'

// 组件三大核心属性 1: state
// import { Weather, EasyWeather } from './components/StateDemo'

// 组件三大核心属性 2: props
// import { Person, EasyPerson, FuncPerson } from './components/PropsDemo'
// let p = { name: 'zty', age: 24, sex: '男' } // 批量传递props

// 组件三大核心属性 3: refs与事件处理
// import { RefStringDemo, RefCallbackDemo, RefCreateRefDemo } from './components/RefsDemo'

// 收集表单数据 - 非受控组件与受控组件
// Login3 高阶函数 + 柯里化
// Login4 箭头函数(不用柯里化)
// import { Login1, Login2, Login3, Login4 } from './components/FormDemo'

// 生命周期(旧)
// Life - 引出生命周期
// eslint-disable-next-line
// import { Life, Count, A, B } from './components/OldLifeCycleDemo'

// 生命周期(新)
// import { Count, NewsList } from './components/NewLifeCycleDemo'

// DOM的diffing算法
// import { Person } from './components/DOMDiffingDemo'

// 组件设计 —— TodoList
// import TodoList from './components/ComponentDesign/TodoList'

// ajax —— 配置代理
// import AjaxDemo from './components/AjaxDemo'

// github 搜索案例
// import GithubSearch from './components/ComponentDesign/GithubSearch'

// 前端路由原理
// eslint-disable-next-line
// import { HashRouterDemo, HistoryRouterDemo, ReactRouterDemo } from './components/RouterDemo'

// Antd使用
import AntdDemo from './components/AntdDemo'

ReactDOM.render(
  <React.StrictMode>
    {/* <App /> */}
    {/* <ScopedStyle1 />
    <ScopedStyle2 /> */}
    {/* <JSXBaseDemo /> */}
    {/* <FunctionalComponentDemo /> */}
    {/* <ClassComponentDemo /> */}
    {/* <EasyWeather /> */}
    {/* <Person name="tom" age={5} />
    <Person {...p} />
    <EasyPerson name="props简写" />
    <FuncPerson name="jerry" /> */}
    {/* <RefStringDemo />
    <RefCallbackDemo />
    <RefCreateRefDemo /> */}
    {/* <Login1 />
    <Login2 />
    <Login3 />
    <Login4 /> */}
    {/* <Life /> */}
    {/* <Count /> */}
    {/* <A /> */}
    {/* <Count count={199} /> */}
    {/* <NewsList /> */}
    {/* <Person /> */}
    {/* <TodoList /> */}
    {/* <AjaxDemo /> */}
    {/* <GithubSearch /> */}
    {/* <HistoryRouterDemo /> */}
    {/* <HashRouterDemo /> */}
    {/* <ReactRouterDemo /> */}
    <AntdDemo />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();
